<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style>
    body {
      background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);
      background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
      background-attachment: fixed;
      overflow: hidden;
    }
    @keyframes rotate {
      0% {
        transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
      }

      100% {
        transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
      }
    }
    /* 第一个圆 */
    .sircle {
      width: 80px;
      height: 80px;
      border: 1px solid #ccc;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-left-color: red;
      border-right-color: black;
      border-top-color: yellow;
      border-radius: 50%; 
      animation: circle 3s  infinite linear;
      -webkit-animation: circle 3s  infinite linear;
    }
    .sircle>.yellow {
      width: 20px;
      height: 20px;
      position: absolute;
      background: yellow;
      border-radius: 50%;
      top: 0;
      left: 55px;
    }
    /* 第二个圆 */
    .sircle1 {
      width: 160px;
      height: 160px;
      border: 1px solid #ccc;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      animation: circle 5s infinite linear;
      -webkit-animation: circle 5s infinite linear;
    }
    .sircle1>.yellow1 {
      position: absolute;
      left: 30px;
      top: 0px;
      display: inline-block;
      width: 20px;
      height: 20px;
      background: blue;
      border-radius: 50%;
    }
    /* 第三个圆 */
    .sircle2 {
      width: 240px;
      height: 240px;
      border: 1px solid #ccc;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      animation: circle 4s infinite linear;
      -webkit-animation: circle 4s infinite linear;
    }
    .sircle2>.minsircle1>.yellow2 {
      position: absolute;
      left: 10px;
      top: 10px;
      display: inline-block;
      width: 20px;
      height: 20px;
      background: green;
      border-radius: 50%;
    }
 /* 第四个圆 */
 .sircle3 {
      width: 320px;
      height: 320px;
      border: 1px solid #ccc;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      animation: circle 5s infinite linear;
      -webkit-animation: circle 5s infinite linear;
    }

    .sircle3>.yellow3 {
      position: absolute;
      left: 95px;
      top: 0px;
      display: inline-block;
      width: 20px;
      height: 20px;
      background: red;
      border-radius: 50%;
    }

    /* 第五个圆 */
    .sircle4 {
      width: 400px;
      height: 400px;
      border: 1px solid #ccc;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      animation: circle 7s infinite linear;
      -webkit-animation: circle 7s infinite linear;
    }

    .sircle4>.yellow4 {
      position: absolute;
      left: 262px;
      top: 375px;
      display: inline-block;
      width: 20px;
      height: 20px;
      background: #ccc;
      border-radius: 50%;
    }

    /* 第六个圆 */
    .sircle5 {
      width: 480px;
      height: 480px;
      border: 1px solid #ccc;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      animation: circle 7s infinite linear;
      -webkit-animation: circle 7s infinite linear;
    }

    .sircle5>.yellow5 {
      position: absolute;
      left: 97px;
      top: 431px;
      display: inline-block;
      width: 20px;
      height: 20px;
      background: green;
      border-radius: 50%;
    }

    .sircle5>.outer {
      width: 30px;
      height: 15px;
      position: absolute;
      left: 88px;
      top: 429px;
      display: inline-block;
      opacity: 0.4;
      border-radius: 50%;
      border: 4px solid #eee;
    }
    /* 圆中圆 */
    .minsircle {
      display: inline-block;
      position: absolute;
      left: 34px;
      top: 10px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: yellow;
    }
    .minsircle1 {
      display: inline-block;
      position: absolute;
      left: 100%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      animation: circle 1s infinite linear;
      -webkit-animation: circle 1s infinite linear;
    }
    .text{
      animation: names .5s infinite alternate-reverse linear;
      color: #fff;
      text-align: center;
      font-size: 50px;
    }
    .video{
      width: 250px;
      margin: 30px auto 0;
    }

    @keyframes names {
      0% {
        transform: translateY(10px)
      }
      100%{
        transform:translateY(0)
      }
    }
    @keyframes circle {
      0% {
        transform:translate(-50%, -50%) rotate(0deg)
      }
      100%{
        transform:translate(-50%, -50%) rotate(360deg)
      }
    }

  </style>
</head>
<body>
  <div class="text">css动画</div>
  <!-- 看视频 -->
  <div class="video">
      <input class="" value="" id="url" type="text">
      <button onclick="toVideoFn()">提交</button>
  </div>
  

  <!-- 第六个圆 -->
  <div class="sircle5">
    <div class="outer"></div>
    <span class="yellow5"></span>
  </div>
  <!-- 第五个圆 -->
  <div class="sircle4">
    <span class="yellow4"></span>
  </div>
  <!-- 第四个圆 -->
  <div class="sircle3">
    <span class="yellow3"></span>
  </div>
  <!-- 第三个圆 -->
  <div class="sircle2">
    <em class="minsircle1">
      <span class="minsircle"></span>
      <span class="yellow2"></span>
    </em>
  </div>
  <!-- 第二个圆 -->
  <div class="sircle1">
    <span class="yellow1"></span>
  </div>
  <!-- 第一个圆 -->
  <div class="sircle">
    <span class="yellow"></span>
    <div class="sun"></div>
  </div>
  <script>
      var url = 'https://jx.wslmf.com/?url='
      function toVideoFn(params)
      {
        var input = document.querySelector('#url').value;
        window.location.href = url + input
      } 
  </script>
</body>
</html>